<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>运动</title>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=DKeROqka2OPQQXqxPAmSgrvc38UvBXRO">
    //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    </script>
</head>

<body class="dpflex fdc sports">
  <!-- 顶部 -->
  <div id="sportsTop">
  </div>
  <!-- 内容 -->
  <div class="main-cont flex1 dpflex fdc">
    <!-- 累积距离 -->
    <div class="sum-msg">
      <p class="distance">目前累积跑步距离:</p>
      <p class="kilometre"><span class="kilometre-num" id="runNum"> </span>公里</p>
    </div>
    <!-- 地图 -->
    <p class="pof go" id="runGoBtn">GO</p>
    <div class="map flex1" id="map"></div>  <!-- 初始化地图 -->
  </div>

  <!-- 倒计时蒙层 -->
  <div class="countdown-mask pof" id="countDownMask">
    <p class="countdown-num poa" id="countDownNum"></p>
  </div>

  <!-- 运动中的默认蒙层 -->
  <div class="motion-mask pof" id="motionMask">
    <p class="title-name" id="titleName">跑步</p>
    <div class="title-top dpflex">
      <p>运动中</p>
      <!-- 音乐&设置图标 -->
      <p class="iconfontbox dpflex">
        <i class="iconfont icon-yinle"></i>
        <i class="iconfont icon-shezhi2"></i>
      </p>
    </div>
    <!-- 公里数 -->
    <div class="motion-kilnum">
      <span class="kilnum" id="kilNum">0.00</span>公里
    </div>
    <!-- GPS -->
    <div class="gps dpflex">
      <p class="signal">GPS信号度低, 数据精准度低</p>
      <p class="horizontal-ine"></p>
      <p><i class="iconfont icon-ditu" id="GPSBtn"></i></p>
    </div>
    <!-- 配速&用时&千卡 -->
    <div class="setup dpflex">
      <!-- 配速 -->
      <div class="base-div1">
        <p class="items dpflex fdc">
          <i class="iconfont icon-speed"></i>
          <span>配速</span>
        </p>
        <p class="disnumber" id="runPace">--</p>
      </div>
      <!-- 用时 -->
      <div class="base-div2">
        <p class="items dpflex fdc">
          <i class="iconfont icon-time"></i>
          <span>用时</span>
        </p>
        <p class="disnumber" id="runTime">00:00:00</p>
      </div>
      <!-- 千卡 -->
      <div class="base-div3">
        <p class="items dpflex fdc">
          <i class="iconfont icon-huoyan"></i>
          <span>千卡</span>
        </p>
        <p class="disnumber" id="runCalorie">0.00</p>
      </div>
    </div>
    <!-- 暂停 -->
    <div class="pause por" id="pauseButton">
      <p class="pause-btn dpflex fdc poa" id="pauseBtn">
        <i class="iconfont icon-zanting1"></i>
        <span>暂停</span>
      </p>
      <i class="iconfont icon-suo poa"></i>
    </div>
    <!-- 继续&结束按钮 -->
    <div class="button clearfix" id="continueEndBtn">
      <p class="btn continue-btn dpflex fdc fl" id="continueBtn">
        <i class="iconfont icon-jixu"></i>
        <span>继续训练</span>
      </p>
      <p class="btn end-btn dpflex fdc fr" id="endBtn">
        <i class="iconfont icon-end"></i>
        <span>结束训练</span>
      </p>
    </div>
  </div>

  <!-- 运动中的地图蒙层 -->
  <div class="map-mask pof" id="mapMask">
    <div class="mapa flex1" id="mapa"></div>  
    <!-- 地图模式 -->
    <div class="map-mode">
      <!-- 返回按钮 -->
      <p class="font-icon tobackbtn poa" id="toBackBtn"><i class="iconfont icon-fanhui"></i></p>
      <!-- 完成按钮 -->
      <p class="finish poa" id="finishBtn">完成</p>
      <p class="font-icon locationbtn poa" id="locationBtn"><i class="iconfont icon-dingwei"></i></p>
      <!-- 跑步信息框 -->
      <div class="locationbox poa" id="locationBox">
        <p class="name-title">跑步</p>
        <div class="infobox dpflex">
          <!-- 配速 -->
          <div>
            <p class="infoname">配速</p>
            <span class="infonum" id="runSpeed"></span>
          </div>
          <!-- 用时 -->
          <div>
            <p class="infoname">用时</p>
            <span class="infonum" id="runTimeNum"></span>
          </div>
          <!-- 距离 -->
          <div>
            <p class="infoname">距离(km)</p>
            <span class="infonum" id="runLiData"></span>
          </div>
        </div>
      </div>

      <!-- 运动结束信息框 -->
      <div class="exercisebox poa" id="exerciseBox">
        <p class="exercise-type">跑步</p>
        <!-- 虚线上面数据 -->
        <div class="date-top dpflex">
          <p class="kilodate"><span class="kilonum" id="kiloNum"></span>公里</p>
          <p class="sports-date" id="sportsDate"></p>
        </div>
        <!-- 虚线下面数据 -->
        <div class="date-bottom dpflex">
          <!-- 平均配速 -->
          <div>
            <p id="runAvgPace"></p>
            <p class="date-text">平均配速</p>
          </div>
          <!-- 用时 -->
          <div>
            <p id="runAllTime"></p>
            <p  class="date-text">用时</p>
          </div>
          <!-- 千卡 -->
          <div>
            <p id="runConsumeKcal"></p>
            <p  class="date-text">千卡</p>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- 底部导航栏 -->
  <div id="footer">
  </div>

  <!--  引入axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</body>

</html>